Een HTML formulier eerste versie
Enkele tips om een basis html formulier te maken
Probleem
We hebben een formulier van doen waarmee we de volgende informatie willen verkrijgen.
Design
De elementen staan gerangschikt in de volgorde waarop ze op het formulier moeten komen te staan.
| element | name attribuut | bij behorend label | value attribuut | placeholder | required | autofocus | ||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| tekstvak | name | Naam | in te typen | ja | ja | |||||||||||||||
| email tekstvak | in te typen | user@provider.domain | ja | nee | ||||||||||||||||
| url tekstvak | url | Website | in te typen | www.provider.domain | nee | nee | ||||||||||||||
| texterea | comment | Commentaar | in te typen | nee | nee | |||||||||||||||
| checkbox | refer-random | Toevallig | random | nee | nee | |||||||||||||||
| checkbox | refer-friend | Vriend | friend | nee | nee | |||||||||||||||
| checkbox | refer-search-engine | Zoekmachine | search-engine | nee | nee | |||||||||||||||
| keuzerondjes | rating | Wat vind je van deze website |
|
|||||||||||||||||
| keuzelijst | country | Land | Opties:
|
ja | nee |
Oplossing
We plaatsen de html elementen de een na de ander in het formulier en voegen de attributen, die in de design zijn opgenoemd, toe.
Je kan de standaard foutmeldingen voor required wijzigen:
By setting and unsetting the setCustomValidity in the right time, the validation message will work flawlessly.
<input name="Username" required oninvalid="this.setCustomValidity('Username cannot be empty.')" onchange="this.setCustomValidity('')" type="text" />
I used onchange instead of oninput which is more general and occurs when the value is changed in any condition even through JavaScript.
2016-11-13 15:56:25